<template>
  <div class="profile-container" v-loading="loading">
    <el-scrollbar>
      <el-row>
        <el-col :span="24">
          <el-card :body-style="cardStyle">
            <div class="welcome-container">
              <div class="avatar-container">
                <svg-icon class="avatar-icon" icon="avatar" />
              </div>
              <div class="page-header-top">
                <div class="page-title">
                  <span>{{ welComText }}</span>
                </div>
                <!--                <p data-v-1a218894="" class="page-header-tip-description">9月1日更新（如果网页未自动刷新，请按住键盘Ctrl +-->
                <!--                  F5强制刷新）：-->
                <!--                   <a style="margin-left:0" href="https://vue-admin-beautiful.com/shop-vite/" target="_blank">Vue Shop-->
                <!--                    Vite</a>-->
                <!--                  累计完成4种布局，3种主题，无数种颜色搭配，覆盖绝大多数使用场景，大幅提升开发效率。-->
                <!--                  📦 update️：-->
                <!--                  登录页、注册页重构，支持主题换肤、多语言切换；-->
                <!--                  <a style="margin-left:0" href="https://vue-admin-beautiful.com/shop-vite/#/vab/table/customTable"-->
                <!--                     target="_blank">表格组件</a>、暗黑模式、科技主题等迎来重磅升级；-->
                <!--                  <a style="margin-left:0" href="https://vue-admin-beautiful.com/shop-vite/#/other/video"-->
                <!--                     target="_blank">视频播放器</a>支持直播推流；-->
                <!--                  工作流组件支持暗黑模式；-->
                <!--                  新增持久化标签功能；-->
                <!--                  新增<a style="margin-left:0" href="https://vue-admin-beautiful.com/shop-vite/#/other/gantt"-->
                <!--                         target="_blank">甘特图</a>；-->
                <!--                  购买即送全新<a style="margin-left:0" href="https://vue-admin-beautiful.com/shop-vite/#/dataScreen"-->
                <!--                                 target="_blank">数据大屏</a>模板。-->
                <!--                  <span style="color:#FF5722">教师节特惠</span>：<a style="margin-left:0"-->
                <!--                                                                   href="https://vue-admin-beautiful.com/authorization/shop-vite.html"-->
                <!--                                                                   target="_blank">点我购买</a></p>-->
                <p data-v-1a218894="" class="page-header-tip-description">🎉🎉公司的一些通知</p>
              </div>

            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-card style="margin-top: 16px">
        <template #header>
          <div class="card-header-wrap">
            <svg-icon icon="kong-long" class-name="header-icon" />
            <span class="header-title">项目概览</span>
          </div>
        </template>
        <el-row class="card-container" :gutter="24">
          <el-col :span="6">
            <div class="card-item"
              style="--card-bg: linear-gradient(90deg, #74bcff, #1890ff);--icon-color: #1890ff;--icon-size: 32px;--text-color:#ffffff;">
              <div class="text">
                <span>{{ projectData.weiwanchengxiangmu || '000' }}</span>
                <div class="icon-container">
                  <svg-icon icon="physics" class="icon" />
                </div>
              </div>
              <span class="title">未完成项目</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="card-item item-1"
              style="--card-bg: linear-gradient(to right,rgba(240,2,20,0.098), var(--el-color-white)) no-repeat;--icon-color: #2c8cf4;--icon-size: 32px;">
              <div class="text">
                <span>{{ projectData.daiyanshouxiangmu || '000' }}</span>
                <svg-icon class="icon" icon="briefcase" />
              </div>
              <span class="title">待验收项目</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="card-item item-1"
              style="--card-bg: linear-gradient(to right,var(--el-color-primary-light-9), var(--el-color-white)) no-repeat;--icon-color: #2c8cf4;--icon-size: 32px;">
              <div class="text">
                <span>{{ projectData.yiwanchengxiangmu || '000' }}</span>
                <svg-icon class="icon" icon="briefcase" />
              </div>
              <span class="title">已完成项目</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="card-item item-1" style="--card-bg: #d6f0fd;--icon-color: #2c8cf4;--icon-size: 32px;">
              <div class="text">
                <span>{{ projectData.yanqixiangmu || '000' }}</span>
                <svg-icon class="icon" icon="briefcase" />
              </div>
              <span class="title">延期项目</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="card-item item-1" style="--card-bg: #e3e4ff;--icon-color: #5f5ff6;--icon-size: 32px;">
              <div class="text">
                <span>{{ projectData.yanqixiangmujilu || '000' }}</span>
                <svg-icon class="icon" icon="briefcase" />
              </div>
              <span class="title">延期项目记录</span>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="project-chat-container" ref="chartDom">
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-card style="margin-top: 16px">
        <template #header>
          <div class="card-header-wrap">
            <svg-icon icon="kong-long" class-name="header-icon" />
            <span class="header-title">任务概览</span>
          </div>
        </template>
        <el-row :gutter="24" class="card-container">
          <el-col :span="6" :lg="6" :md="12" :sm="12" :xs="12">
            <div class="card-item"
              style="--card-bg: linear-gradient(90deg, #74bcff, #1890ff);--icon-color: #1890ff;--icon-size: 32px;--text-color:#ffffff;">
              <div class="text">
                <span>{{ projectData.yiwanchengrenwu || '000' }}</span>
                <div class="icon-container">
                  <svg-icon icon="physics" class="icon" />
                </div>
              </div>
              <span class="title">已完成任务</span>
            </div>
          </el-col>
          <el-col :span="6" :lg="6" :md="12" :sm="12" :xs="12">
            <div class="card-item item-1" style="--card-bg: #d6fdd9;--icon-color: #009d73;--icon-size: 42px;">
              <div class="text">
                <span>{{ projectData.yanqirenwu || '000' }}</span>
                <svg-icon class="icon" icon="eye" />
              </div>
              <span class="title">延期任务</span>
            </div>
          </el-col>
          <el-col :span="6" :lg="6" :md="12" :sm="12" :xs="12">
            <div class="card-item item-1" style="--card-bg: #d6f0fd;--icon-color: #2c8cf4;--icon-size: 32px;">
              <div class="text">
                <span>{{ projectData.weiwanchengrenwu || '000' }}</span>
                <svg-icon class="icon" icon="briefcase" />
              </div>
              <span class="title">未完成任务</span>
            </div>
          </el-col>
          <el-col :span="6" :lg="6" :md="12" :sm="12" :xs="12">
            <div class="card-item item-1" style="--card-bg: #e3e4ff;--icon-color: #5f5ff6;--icon-size: 32px;">
              <div class="text">
                <span>{{ projectData.yanqirenwujilu || '000' }}</span>
                <svg-icon class="icon" icon="envelope" />
              </div>
              <span class="title">延期任务记录</span>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-card style="margin-top: 16px;">
        <template #header>
          <div class="card-header-wrap">
            <svg-icon icon="kong-long" class-name="header-icon" />
            <span class="header-title">加班概览</span>
          </div>
        </template>
        <el-row :gutter="24" class="card-container">
          <el-col :span="6" :lg="6" :md="12" :sm="12" :xs="12">
            <div class="card-item"
              style="--card-bg: linear-gradient(90deg, #74bcff, #1890ff);--icon-color: #1890ff;--icon-size: 32px;--text-color:#ffffff;">
              <div class="text">
                <span>{{ projectData.benzhoujiaban || '0' }}</span>
                <div class="icon-container">
                  <svg-icon icon="physics" class="icon" />
                </div>
              </div>
              <span class="title">本周加班天数</span>
            </div>
          </el-col>
          <el-col :span="6" :lg="6" :md="12" :sm="12" :xs="12">
            <div class="card-item item-1" style="--card-bg: #d6fdd9;--icon-color: #009d73;--icon-size: 42px;">
              <div class="text">
                <span>{{ projectData.shangzhoujiaban || '0' }}</span>
                <svg-icon class="icon" icon="eye" />
              </div>
              <span class="title">上周加班天数</span>
            </div>
          </el-col>
          <el-col :span="6" :lg="6" :md="12" :sm="12" :xs="12">
            <div class="card-item item-1" style="--card-bg: #d6f0fd;--icon-color: #2c8cf4;--icon-size: 32px;">
              <div class="text">
                <span>{{ projectData.benyuejiaban || '0' }}</span>
                <svg-icon class="icon" icon="briefcase" />
              </div>
              <span class="title">本月加班天数</span>
            </div>
          </el-col>
          <el-col :span="6" :lg="6" :md="12" :sm="12" :xs="12">
            <div class="pin-container" ref="pinRef"></div>
          </el-col>
        </el-row>
      </el-card>
      <!--      <div class="row-item" v-for="(item,index) in optionsData" :key="index">-->
      <!--        <el-row>-->
      <!--          <el-col :span="item.wrapSpan">-->
      <!--            <el-card shadow="hover">-->
      <!--              <template #header>-->
      <!--                <div class="card-header">-->
      <!--                  <span>{{ item.label }}</span>-->
      <!--                </div>-->
      <!--              </template>-->
      <!--              <el-row>-->
      <!--                <div class="data-item" v-for="(col,colIndex) in item.keys" :key="colIndex">-->
      <!--                  <span class="data-value">{{ col.value }}</span>-->
      <!--                  <span class="data-label">{{ col.label }}</span>-->
      <!--                </div>-->
      <!--              </el-row>-->
      <!--            </el-card>-->
      <!--          </el-col>-->
      <!--        </el-row>-->
      <!--      </div>-->
    </el-scrollbar>
  </div>
</template>

<script setup>
import { getProfileData } from '@/api/user'
import { toast } from "@/hook/toast";
import { computed, onActivated, onDeactivated, onMounted, ref } from "vue";
import { delay } from "@/utils";
import { useStore } from "vuex";
import * as echarts from 'echarts';

let isFirst = true
const chartDom = ref(null);
const pinRef = ref(null)
let myChart = null
let pinChat = null
onMounted(() => {
  initData()
})

onActivated(() => {
  if (isFirst) {
    isFirst = false
    return
  }
  initData()
})
onDeactivated(() => {
  myChart && myChart.dispose()
  pinChat && pinChat.dispose()
  myChart = null
  pinChat = null
})

function initPinChat([n, m, k]) {
  pinChat = echarts.init(pinRef.value);
  const option = {
    tooltip: {
      trigger: 'item'
    },
    grid: {
      height: 148,
      left: 24,
      right: 24,
      top: 24,
      bottom: 24,
    },
    series: [
      {
        name: '加班概览',
        type: 'pie',
        radius: ['20%', '70%'],
        avoidLabelOverlap: false,
        barWidth: 50,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },

        // label: {
        //   show: false,
        // },
        emphasis: {
          label: {
            show: true,
          }
        },
        labelLine: {
          show: true
        },
        data: [
          { value: n, name: '本周加班天数', itemStyle: { color: '#5392fc' } },
          { value: m, name: '上周加班天数', itemStyle: { color: '#5ace7c' } },
          { value: k, name: '本月加班天数', itemStyle: { color: '#f2637b' } }
        ]
      }
    ]
  };

  pinChat.setOption(option);
}

function initBarChart(data) {
  myChart = echarts.init(chartDom.value);
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      }
    },
    color: '#4e88f3',
    grid: {
      height: 148,
      left: '90px',
      top: 4,
      bottom: 4,
    },
    xAxis: {
      type: 'value',
      show: false,
      boundaryGap: ['5%', '5%'],//留白大小，坐标轴两边留白
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      show: true,
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      show: false
    },
    yAxis: {
      inverse: true,
      boundaryGap: ['2%', '2%'],
      type: 'category',
      data: ['未完成项目', '待验收项目', '已完成项目', '延期项目', '延期项目记录'],
      offset: 80,
      axisLabel: {
        baseline: 'middle',
        color: '#acacac',
        fontSize: 12,
        textStyle: {
          align: 'left',
        }
      },
      axisLine: {
        show: false,
        onZero: false,
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        data,
        type: 'bar',
        barWidth: 16,
        barGap: 20,
        label: {
          show: true,
          position: 'right',
          valueAnimation: true,
          verticalAlign: 'middle'
        },
        itemStyle: {
          normal: {
            barBorderRadius: 24
          }
        }
      },
    ]
  };
  myChart.setOption(option);
}

const store = useStore()
const loading = ref(false)
const optionsData = ref([])
const projectData = ref({})

const userInfo = computed(() => store.getters.userInfo)
const welComText = computed(() => store.getters.welComeText)

function generateData(data) {
  const itemSpan = 3
  const projectKeys = [
    {
      label: '未完成项目',
      key: 'weiwanchengxiangmu',
    },
    {
      label: '待验收项目',
      key: 'daiyanshouxiangmu',
    },
    {
      label: '已完成项目',
      key: 'yiwanchengxiangmu',
    },
    {
      label: '延期项目',
      key: 'yanqixiangmu',
    },
    {
      label: '延期项目记录',
      key: 'yanqixiangmujilu',
    }
  ]
  const tasKeys = [
    {
      key: 'weiwanchengrenwu',
      label: '未完成任务'
    },
    {
      key: 'yiwanchengrenwu',
      label: '已完成任务'
    },
    {
      key: 'yanqirenwu',
      label: '延期任务'
    },
    {
      key: 'yanqirenwujilu',
      label: '延期任务记录'
    }
  ]
  const banKeys = [
    {
      key: 'benzhoujiaban',
      label: '本周加班天数',
    },
    {
      key: 'shangzhoujiaban',
      label: '上周加班天数',
    },
    {
      key: 'benyuejiaban',
      label: '本月加班天数',
    }
  ]
  optionsData.value = [
    {
      gutter: 1,
      keys: projectKeys.map(item => {
        item.value = data[item.key] || '0'
        item.span = 4
        return item
      }),
      label: '项目概览',
      wrapSpan: projectKeys.length * itemSpan,
      itemSpan,
    },
    {
      keys: tasKeys.map(item => {
        item.value = data[item.key] || '0'
        item.span = 24 / tasKeys.length
        return item
      }),
      label: '任务概览',
      wrapSpan: tasKeys.length * itemSpan,
      itemSpan,
    },
    {
      keys: banKeys.map(item => {
        item.value = data[item.key] || '0'
        item.span = 24 / banKeys.length
        return item
      }),
      label: '任务概览',
      wrapSpan: banKeys.length * itemSpan,
      itemSpan,
    }
  ]
}

const cardStyle = computed(() => {
  return {
    background: 'var(--el-color-white) linear-gradient(120deg, var(--el-color-primary-light-9) 10%, var(--el-color-white)) no-repeat',
  }
})


function getDataByKey(data, keys) {
  const result = []
  keys.forEach(key => {
    result.push(data[key] || 0)
  })
  return result
}

function getLineChatData(data) {
  const keys = ['weiwanchengxiangmu', 'daiyanshouxiangmu', 'yiwanchengxiangmu', 'yanqixiangmu', 'yanqixiangmujilu']
  return getDataByKey(data, keys)
}

function getPinChatData(data) {
  const keys = ['benzhoujiaban', 'shangzhoujiaban', 'benyuejiaban']
  return getDataByKey(data, keys)
}

async function initData() {
  loading.value = true
  const resp = await getProfileData()
  const { code, data, msg } = resp
  await delay(200)
  loading.value = false
  if (code !== 1) return toast({ title: msg, type: 'error' })
  projectData.value = data
  initBarChart(getLineChatData(data))
  initPinChat(getPinChatData(data))
  // generateData(data)
}

</script>
<style lang="scss" scoped>
.profile-container {
  height: 100%;
  background: #f6f8f9;
  box-sizing: border-box;
  position: relative;
  padding: 12px;

  .card-header-wrap {
    display: flex;
    align-items: center;

    .header-icon {
      font-size: 24px;
      color: #ff8400;
    }

    .header-title {
      font-size: 16px;
      margin-left: 4px;
      color: var(--el-text-color-primary);
    }
  }

  .bord-container {
    .bord-item {
      height: 168px;
      padding: 20px;
      box-sizing: border-box;
      position: relative;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      overflow: hidden;
      background: #ffffff;

      .bord-content {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 24px;

        .bord-value {
          font-size: 28px;
          color: #303133;
        }

        .icon-wrap {}
      }

      .bord-title {
        font-size: 14px;

      }
    }
  }

  .pin-container {
    width: 100%;
    overflow: hidden;
    height: 168px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }

  .project-chat-container {
    width: 100%;
    overflow: hidden;
    height: 168px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 8px;
  }

  .card-container {
    margin-top: 16px;

    .card-item {
      width: 100%;
      height: 168px;
      border-radius: 3px;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      padding: 20px;
      border: 1px solid #e4e7ed;
      transition: .3s;
      color: #0e2a47;
      display: flex;
      flex-flow: column;
      background: var(--card-bg);
      margin-bottom: 24px;
      --text-color: var(--el-text-color-primary);

      .icon-container {
        width: 60px;
        height: 60px;
        box-sizing: border-box;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
      }

      &:hover {
        box-shadow: 0 0 12px rgba(0, 0, 0, .12);
      }

      .text {
        height: 60px;
        display: flex;
        font-size: 38px;
        font-weight: bold;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        margin-top: 16px;
        color: var(--text-color);

        .icon {
          font-size: var(--icon-size);
          color: var(--icon-color);
        }
      }

      .title {
        padding-left: 22px;
        font-size: 16px;
        margin-top: 10px;
        color: var(--text-color);
      }
    }

    .card-board-container {
      flex: 1;
      color: #fff;
      padding: 15px;
      background-image: linear-gradient(90deg, #74bcff, #1890ff);

      .content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 24px 0;

        .yue {
          padding-right: 10px;
          font-size: 32px;
        }

        .number {
          font-size: 32px;
        }

        .right-icon {
          width: 60px;
          aspect-ratio: 1/1;
          background: #fff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;

          .icon {
            color: #1890ff;
            font-size: 28px;
          }
        }
      }

      .bottom {
        font-size: 14px;
        display: flex;
        align-items: center;

        .icon-arrow {
          transform: rotate(-90deg);
          margin: 0 8px 0 12px;
        }
      }
    }
  }


  .welcome-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;

    .page-header-top {
      flex: auto;

      .page-header-tip-description {
        line-height: 22px;
        margin: 14px 0;
        font-size: 14px;
        color: rgb(48, 49, 51);
      }

      .page-title {
        font-size: 18px;
        font-weight: 700;
        color: #303133;
        margin: 18px 0;
      }
    }

    .avatar-container {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow-y: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(78, 136, 243, 0.1);
      margin-right: 20px;
      flex-shrink: 0;

      .avatar-icon {
        font-size: 40px;
      }
    }
  }


  .row-item {
    margin-bottom: 20px;

    .data-item {
      display: flex;
      align-items: center;
      flex-flow: column;
      color: #303133;
      flex: 1;
      cursor: pointer;

      .data-label {
        font-size: 14px;
        padding: 14px 0;
      }

      .data-value {
        font-size: 30px;
        font-weight: bold;
      }
    }
  }

  //.card-item {
  //  border-radius: 2px;
  //  overflow: hidden;
  //  width: fit-content;
  //  border: 1px solid #e4e7ed;
  //  background: #ffffff;
  //
  //  .card-body {
  //    padding: 20px;
  //    box-sizing: border-box;
  //    position: relative;
  //    display: flex;
  //    flex-flow: row nowrap;
  //
  //
  //  }
  //
  //  .card-header {
  //    padding: 20px;
  //    box-sizing: border-box;
  //    color: #303133;
  //    font-size: 16px;
  //    border-bottom: 1px solid #e4e7ed;
  //  }
  //}

}
</style>
